import React from "react";
import "../../css/zh/zh.css";
import { useNavigate } from "react-router-dom";
// 引入图标库
import Left from "../../css/zh/icon/left.svg?react";
import Icon from "../../css/zh/icon/icon.svg?react";
import Wx from "../../css/zh/icon/Wx.svg?react";
import Zfb from "../../css/zh/icon/zfb.svg?react";
import Sjh from "../../css/zh/icon/sjh.svg?react";

const Zh = () => {
  const navigate = useNavigate();
  return (
    <div>
      <p className="my_p">
        <Left className="icon-left" />
      </p>
      <div style={{ textAlign: "center" }}>
        <Icon className="icon-icon" />
        <h1 className="h-1">快来体验吧~</h1>
      </div>
      <div
        className="hh"
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          marginTop: "50px",
        }}
      >
        <button
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <Wx style={{ width: "24px", height: "24px", marginRight: "10px" }} />
          微信
        </button>
        <button
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          {" "}
          <Zfb
            style={{ width: "24px", height: "24px", marginRight: "10px" }}
          />{" "}
          支付宝
        </button>
        <button
          onClick={() => {
            navigate("/sjdl");
          }}
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          {" "}
          <Sjh
            style={{ width: "24px", height: "24px", marginRight: "10px" }}
          />{" "}
          手机号
        </button>
      </div>
      <p className="ho">或</p>
      <p style={{ textAlign: "center", marginTop: "20px" }}>
        <button class="cssbuttons-io-button">
          账号密码登录
          <div
            onClick={() => {
              navigate("/login");
            }}
            class="icon"
          >
            <svg
              height="24"
              width="24"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path d="M0 0h24v24H0z" fill="none"></path>
              <path
                d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"
                fill="currentColor"
              ></path>
            </svg>
          </div>
        </button>
      </p>
      <p style={{ textAlign: "center", margin: "30px auto", fontSize: "18px" }}>
        <span>还没有账号？</span>
        <span
          onClick={() => {
            navigate("/zc");
          }}
          style={{ color: "#7210FF" }}
        >
          去注册
        </span>
      </p>
    </div>
  );
};

export default Zh;
